<template>
    <div class="my-detail my-wbox" v-loading="loading">
        <h3><i></i>举报信息
            <!-- <span class="tags" :class="detail.rectifyStatus == 1 ? 'tags-blue' : detail.rectifyStatus == 2 ? 'tags-origin'
        : detail.rectifyStatus == 3 ? 'tags-green' : detail.rectifyStatus == 4 ? 'tags-red' : ''">
                {{ detail.rectifyStatus == 1 ? '待分配' : detail.rectifyStatus == 2 ? '待整改'
        : detail.rectifyStatus == 3 ? '已完成' : detail.rectifyStatus == 4 ? '驳回' : ''
                }}
            </span> -->
        </h3>
        <ul>
            <li>举报人姓名：<span>{{ detail.reportUser }}</span></li>
            <li>身份信息：<span>{{ detail.reportUserCard }}</span></li>
            <li>举报人电话：<span>{{ detail.userTel }}</span></li>
            <!-- <li>举报来源：<span>{{ ['有奖举报', '用户举报'][detail.resourceType - 1] }}</span></li> -->
            <li>被举报单位：<span>{{ detail.unitName }}</span></li>
            <li>举报问题所在街道：<span>{{ detail.townName }}</span></li>
            <li>详细地址：<span>{{ detail.address }}</span></li>
            <li class="one">举报内容：<span>{{ detail.reportContent }}</span></li>
            <li v-if="detail.reportImgs && detail.reportImgs != ''">举报照片：
                <div class="my-detail__img">
                    <el-image v-for="(item, index) in detail.reportImgs.split(',')" :initial-index="index" :src="item"
                        :preview-src-list="detail.reportImgs.split(',')" fit="cover" />
                </div>
            </li>
            <li v-if="detail.reportFiles">举报文件：
                <div class="my-file-box">
                    <div v-for="(item, index) in detail.reportFiles.split(',')" :initial-index="index" class="my-file"
                        @click="handleLook(item)">
                        <img src="@/assets/file.png" /><span class="fileTitle">
                            {{ `举报附件${index + 1}` }}
                        </span>
                    </div>
                </div>
            </li>

            <!-- 不予立案 -->
            <li v-if="detail.refuseReason && detail.refuseReason != ''">不予立案原因：<span>{{
        detail.refuseReason }}</span></li>
            <li v-if="detail.refuseTime && detail.refuseTime != ''">拒绝时间：<span>{{
        detail.refuseTime }}</span></li>


        </ul>
        <!-- 子工单信息 -->
        <template v-if="detail.orderList != '' && detail.orderList.lenght != 0">
            <h3 style="margin-bottom: 16px;"><i></i>子工单信息</h3>

            <el-collapse v-model="activeCol" accordion>
                <el-collapse-item v-for="(item, index) in detail.orderList" :key="item.id"
                    :title="`子工单编号：${item.orderCode}`" :name="index">
                    <ul>
                        <li>隐患类型：<span>{{ ['重大隐患', '一般隐患'][item.dangerType - 1] }}</span></li>
                        <li>接收单位：<span>{{ item.acceptName }}</span></li>
                        <li>规定完成时间：<span>{{ item.requireTime }}</span></li>
                        <li v-if="item.alloceUserName">分配人：<span>{{ item.alloceUserName }}</span></li>
                        <li v-if="item.alloceTime">分配时间：<span>{{ item.alloceTime }}</span></li>
                        <li v-if="item.rectifyUserName">整改人：<span>{{ item.rectifyUserName }}</span></li>
                        <li v-if="item.rectifyContent" class="one">整改内容：<span>{{ item.rectifyContent }}</span></li>
                        <li v-if="item.rectifyImgs" class="one">整改后照片：</li>
                        <div class="my-detail__img" v-if="item.rectifyImgs">
                            <el-image v-for="(it, index) in item.rectifyImgs.split(',') " :initial-index="index"
                                :src="it" :preview-src-list="item.rectifyImgs.split(',')" fit="cover" />
                        </div>
                        <li v-if="item.rectifyTime">整改完成时间：<span>{{ item.rectifyTime }}</span></li>
                        <li v-if="item.vertifyFlag !== ''">举报核实：<span>{{ ['否', '是'][item.vertifyFlag] }}</span></li>
                        <li v-if="item.visitMsg" class="one">回访记录：<span>{{ item.visitMsg }}</span></li>
                    </ul>
                    <template v-if="item.progressList != '' && item.progressList.lenght != 0">
                        <div class="meiyongTitle">
                            <h4 class="myTitle">审批信息</h4>
                            <div class="bigBox" v-for="(it, ix) in item.progressList" :key="item.id">
                                <div class="ball"></div>
                                <ul class="myUlBox">
                                    <li>流程节点名称：<span>{{ it.flowNodeName }}</span></li>
                                    <li>审批人名称：<span>{{ it.approveName }}</span></li>
                                    <li v-if="it.nodeStatus">审批状态：<span>{{ ['待审批', '同意', '不同意'][it.nodeStatus - 1]
                                            }}</span>
                                    </li>
                                    <li v-if="it.approveTime">审批时间：<span>{{ it.approveTime }}</span></li>
                                    <li v-if="it.approveOpinions">审批意见：<span>{{ it.approveOpinions }}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </template>

                    <template v-if="item.recordList != '' && item.recordList.lenght != 0">
                        <h4 class="myTitle" style="margin-top: 16px;">流转记录</h4>
                        <div class="meiyongTitle">
                            <div class="bigBox" v-for="(it, ix) in item.recordList" :key="item.id">
                                <div class="ball"></div>
                                <div class="myliuBox">
                                    <div class="topBox">
                                        <div class="left">{{ it.userName }}</div>
                                        <div class="right">{{ it.createTime }}</div>
                                    </div>
                                    <div class="huiBox">
                                        <spam style="color: rgba(153, 153, 153, 1);">操作内容：</spam><span>{{ it.action
                                            }}</span>
                                    </div>
                                </div>

                            </div>
                        </div>


                    </template>

                </el-collapse-item>
            </el-collapse>


        </template>
        <template v-if="shenPiStatus == '1'">
            <el-form :model="form" ref="ruleFormRef" :rules="rules">
                <ul>
                    <li>
                        <el-form-item label="审批结果" :label-width="formLabelWidth" prop="nodeStatus">
                            <el-select style="width: 100%;" v-model="form.nodeStatus" filterable placeholder="请选择"
                                clearable>
                                <el-option :label="'同意'" :value="'2'"></el-option>
                                <el-option :label="'不同意'" :value="'3'"></el-option>
                            </el-select>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="审批意见" :label-width="formLabelWidth" prop="remark">
                            <el-input v-model="form.opinions" autocomplete="off" type="textarea" :rows="2"
                                placeholder="请输入审批意见" />
                        </el-form-item>
                    </li>

                </ul>
            </el-form>
        </template>
        <div style="margin-top: 16px;"></div>
        <el-button @click="onCancel" size="large">返回</el-button>
        <el-button type="primary" v-if="shenPiStatus == '1'" @click="submitForm(ruleFormRef)">审批</el-button>
        <template v-if="isShenpi != '1' && isXiangqing != '1'">
            <el-button v-if="(userInfo.roleId == '2' || userInfo.roleId == '3') && reportStatus == '1'" type="primary"
                @click="onFollowRecord" size="large">立案</el-button>
            <el-button v-if="(userInfo.roleId == '2' || userInfo.roleId == '3') && reportStatus == '1'" type="primary"
                @click="onNotCase" size="large">不予立案</el-button>
            <el-button
                v-if="(userInfo.roleId == '2' || userInfo.roleId == '3') && detail.orderList != '' && detail.orderList[0].orderStatus == '1' && reportStatus == '2'"
                type="primary" @click="onRecover" size="large">收回</el-button>
            <el-button v-if="(userInfo.roleId == '2' || userInfo.roleId == '3') && reportStatus == '3'" type="primary"
                @click="onAglign" size="large">再次分配</el-button>
            <!-- <el-button v-if="(userInfo.roleId == '2' || userInfo.roleId == '3') && reportStatus == '3'" type="primary"
                @click="onBouhui" size="large">驳回</el-button> -->
            <el-button v-if="(userInfo.roleId == '2' || userInfo.roleId == '3') && reportStatus == '3'" type="primary"
                @click="onStop" size="large">终止</el-button>
            <el-button
                v-if="(userInfo.roleId == '2' || userInfo.roleId == '3') && reportStatus == '4' && detail.orderList != '' && detail.orderList[0].rewardFlag != '1'"
                type="primary" @click="onReward" size="large">话费奖励</el-button>

            <el-button
                v-if="(userInfo.roleId == '4' || userInfo.roleId == '6') && reportStatus == '1' && detail.orderList[0].delayFlag != 1 && approveFlag == '0'"
                type="primary" @click="onQianshou" size="large">签收</el-button>
            <el-button
                v-if="(userInfo.roleId == '4' || userInfo.roleId == '6') && reportStatus == '1' && approveFlag == '0' && detail.orderList[0].delayFlag != 1"
                type="primary" @click="onBack" size="large">退回</el-button>
            <el-button
                v-if="(userInfo.roleId == '4' || userInfo.roleId == '6') && reportStatus == '1' && detail.orderList[0].delayFlag != 1 && approveFlag == '0'"
                type="primary" @click="onNotCase" size="large">不予立案</el-button>
            <el-button
                v-if="(userInfo.roleId == '4' || userInfo.roleId == '6') && reportStatus == '2' && detail.orderList[0].delayFlag != 1 && detail.orderList[0].orderStatus == '2'"
                type="primary" @click="onFollow2" size="large">派单</el-button>
            <el-button
                v-if="(userInfo.roleId == '4' || userInfo.roleId == '6') && reportStatus == '2' && detail.orderList[0].delayFlag != 1 && detail.orderList[0].orderStatus == '6'"
                type="primary" @click="onFollow3" size="large">再次分配</el-button>
            <el-button
                v-if="(userInfo.roleId == '4' || userInfo.roleId == '6') && detail.orderList[0].delayFlag == 1 && detail.delayApproveFlag == 0"
                type="primary" @click="onDelay" size="large">延期申请</el-button>
            <!-- <el-button
                v-if="(userInfo.roleId == '4' || userInfo.roleId == '6') && reportStatus == '2' && detail.orderList[0].delayFlag != 1 && detail.orderList[0].orderStatus == '6'"
                type="primary" @click="onBouhui" size="large">驳回</el-button> -->


        </template>


        <!-- <el-button v-if="userInfo.roleId == '4' && detail.rectifyStatus == 3 && detail.visitFlag == 0" type="primary"
            @click="onFollowUp" size="large">记录回访</el-button> -->


        <!-- 分配窗口 -->
        <RecordFollow :isShowDialog="isShowDialog" :dialogData="dialogData" :isBack="true" @onCancel="onCancel">
        </RecordFollow>

        <!-- 市级 再次分配 -->
        <Again :isShowDialog="isShowAGDialog" :dialogData="dialogData" :isBack="true" @onCancel="onCancel"></Again>

        <!-- 收回  -->
        <Recover :isShowDialog="isShowRDialog" :dialogData="dialogData" :isBack="true" @onCancel="onCancel"></Recover>

        <!-- 驳回窗口 -->
        <Stop :isShowDialog="isShowBDialog" :dialogData="dialogData" :isBack="true" @onCancel="onCancel"></Stop>

        <!-- 话费奖励窗口  -->
        <Reward :isShowDialog="isShowRGDialog" :dialogData="dialogData" :isBack="true" @onCancel="onCancel"></Reward>
        <!-- 回访窗口 -->
        <FollowUp :isShowDialog="isShowFDialog" :dialogData="dialogData" :isBack="true" @onCancel="onCancel">
        </FollowUp>

        <!-- 不予立案窗口 -->
        <Nolian :isShowDialog="isShowNDialog" :dialogData="dialogData" :isBack="true" @onCancel="onCancel">
        </Nolian>

        <!-- 退回窗口 -->
        <Back :isShowDialog="isShowKDialog" :dialogData="dialogData" :isBack="true" @onCancel="onCancel"></Back>

        <!-- 镇级 隐患分配  -->
        <Follow2Up v-if="acceptId" :isShowDialog="isShow2Dialog" :dialogData="dialogData" :roleId="userInfo.roleId"
            :acceptId="acceptId" :isBack="true" @onCancel="onCancel">
        </Follow2Up>

        <!-- 镇级 再次分配 -->
        <Follow3Up v-if="acceptId" :isShowDialog="isShow3Dialog" :dialogData="dialogData" :roleId="userInfo.roleId"
            :acceptId="acceptId" :isBack="true" @onCancel="onCancel">
        </Follow3Up>

        <!-- 延期申请窗口  -->
        <Delay :isShowDialog="isShowDeDialog" :dialogData="dialogData" :isBack="true" @onCancel="onCancel"></Delay>

        <el-dialog v-model="dialogVisible" :title="'预览文件'" :width="800">
            <iframe v-if="fileType == 2" :src="pdfUrl + '#toolbar=0'" width="100%"
                style="height: 65vh; overflow: scroll" />
            <vue-office-docx v-if="fileType == 3" :src="pdfUrl" />
            <vue-office-excel v-if="fileType == 4" :src="pdfUrl" />
        </el-dialog>
    </div>
</template>
<script setup lang='ts'>
// @ts-ignore
import { onMounted } from 'vue'
import { ref, reactive, pushScopeId } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getDetailApi, getDetailOneApi } from '@/views/account/api/accountApi'
import {
    getUserInfo,
} from '@/global/session'
import { ElMessage, ElMessageBox, FormRules, FormInstance } from 'element-plus'

import { FunApi } from '@/global/methods'

import RecordFollow from './components/RecordFollow.vue'
import Stop from './components/Stop.vue'
import Nolian from './components/Nolian.vue'
import FollowUp from './components/FollowUp.vue'
import Back from './components/Back.vue'
import Follow2Up from './components/Follow2Up.vue'
import Follow3Up from './components/Follow3Up.vue'
import Delay from './components/Delay.vue'
import Again from './components/Again.vue'
import Recover from './components/Recover.vue'
import Reward from './components/Reward.vue'

import { approveApi } from './api/dangerApi'

import VueOfficeDocx from '@vue-office/docx';
import VueOfficeExcel from '@vue-office/excel'
import { bindFileUrlApi, refuseMessageApi, qianshouApi } from './api/dangerApi'

let userInfo = reactive({ roleId: '', townId: '', roleAuth: '' })
userInfo = JSON.parse(getUserInfo() as string)

const activeCol = ref(0)
const route = useRoute()
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
import { store } from '@/store'

const id = route.query.id as string
const reportStatus = route.query.reportStatus as string
const shenPiId = route.query.shenPiId as string
const approveFlag = route.query.approveFlag as string || 10
const isShenpi = route.query.isShenpi as string || '0'
const shenPiStatus = route.query.shenPiStatus as string || '0'
const activeName = route.query.activeName as string || '0'
const isXiangqing = route.query.isXiangqing as string || '0'

const numArr = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十',]
const form = reactive({
    nodeStatus: '',
    opinions: ''
})
const formLabelWidth = '140px'
const rules = reactive<FormRules>({
    nodeStatus: [
        {
            required: true,
            message: '请选择审批结果',
            trigger: 'change',
        },
    ],
})


const loading = ref<boolean>(false)
let detail = ref<any>({
    "id": "",//数据id
    "reportUser": "",//举报人姓名
    "reportUserCard": "",//举报人身份证号码
    "unitName": "",//被举报单位名称
    "townId": "",//举报问题所在地id
    "townName": "",//举报问题所在地名称
    "address": "",//举报问题所在地详细地址
    "acceptUnit": "",//接收单位名称
    "reportContent": "",//举报内容
    "reportImgs": "",//举报照片
    "reportFiles": "",//举报文件
    "reportStatus": '',//举报状态 举报状态 1、已提交 2、已接收 3、处理中 4、已完结 5、驳回
    "acceptCode": "",//举报接收编号
    "submitTime": "",//举报提交时间
    "acceptTime": "",//接收时间
    "rectifyTime": "",//开始整改时间
    "finishTime": "",//整改完成时间
    "refuseTime": "",//驳回时间
    "refuseReason": "",//驳回原因
    "rectifyStatus": '',//整改状态 1、待分配 2、待整改 3、已结束 4、不受理
    "remark": "",//分配人员时的备注
    "alloceUserId": "",//分配人id
    "alloceUserName": "",//分配人姓名
    "alloceTime": "",//分配时间
    "rectifyUserId": "",//整改人id
    "rectifyUserName": "",//整改姓名
    "rectifyContent": "",//整改内容
    "rectifyImgs": "",//整改照片
    "visitFlag": '',//是否进行了回访 0、否 1、是 2、无需回访
    "visitUserId": "",//回访人id
    "visitUserName": "",//回访人姓名
    "visitMsg": "",//回访信息
    "visitTime": "",//回访时间
    "userTel": "",//举报人电话号码
    "orderList": [
        {
            progressList: [],
            recordList: []
        }
    ], // 子工单列表

})
const dialogVisible = ref<boolean>(false) //文件预览
const fileType = ref(1);
const pdfUrl = ref();

const isShowBDialog = ref<boolean>(false) //数据转移弹窗是否出现 
const isShowRGDialog = ref<boolean>(false) //数据转移弹窗是否出现 
const isShowKDialog = ref<boolean>(false) //数据转移弹窗是否出现 
const isShowNDialog = ref<boolean>(false) //不予立案弹窗是否出现 
const isShowRDialog = ref<boolean>(false) //不予立案弹窗是否出现 
const acceptId: any = ref('')
const isShow2Dialog = ref<boolean>(false) //不予立案弹窗是否出现 
const isShow3Dialog = ref<boolean>(false) //不予立案弹窗是否出现 
const isShowAGDialog = ref<boolean>(false) //数据转移弹窗是否出现 

const isShowDeDialog = ref<boolean>(false) //不予立案弹窗是否出现 

const isShowDialog = ref<boolean>(false) //数据转移弹窗是否出现
const isShowFDialog = ref<boolean>(false) //数据转移弹窗是否出现
const dialogData: any = ref([]) //传给弹窗的数据
//取消
const onCancel = () => {
    router.go(-1)
}

const initData = async () => {
    try {
        // 超管 市级
        let res
        if (isShenpi == '1') {
            res = await getDetailOneApi(id)
        } else {
            // 隐患查询
            if (isXiangqing == '1') {
                if (userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.roleId == '3') {
                    res = await getDetailApi(id)
                } else {
                    res = await getDetailOneApi(id)
                }
            } else {
                if (userInfo.roleId == '2' || userInfo.roleId == '3') {
                    if (reportStatus == '1') {
                        res = await getDetailApi(id)
                    } else {
                        res = await getDetailOneApi(id)
                    }
                } else {
                    res = await getDetailOneApi(id)
                }
            }

        }



        if (res?.code == 0) {
            detail.value = res.data
        }
        loading.value = false
    } catch {
        loading.value = false
    }
}
// 不予立案
const onNotCase = (row: any) => {
    dialogData.value = id
    isShowNDialog.value = !isShowNDialog.value
}

// 收回
const onRecover = (row: any) => {
    dialogData.value = id
    isShowRDialog.value = !isShowRDialog.value
}

// 市级 再次分配
const onAglign = (row: any) => {
    dialogData.value = id
    isShowAGDialog.value = !isShowAGDialog.value
}
// 隐患分配
const onFollowRecord = (row: any) => {
    dialogData.value = detail.value.id
    isShowDialog.value = !isShowDialog.value
}

// 审批
const submitForm = async (formEl: FormInstance | undefined) => {

    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let params = {
                id: shenPiId,
                nodeStatus: form.nodeStatus,
                opinions: form.opinions,
                flowNodeType: activeName
            }
            approveApi(params).then((res) => {
                if (res.code == 0) {
                    ElMessage.success('已审批!')


                    setTimeout(() => {
                        console.log('shuaxin')
                        //刷新表格
                        store.commit('refresh/setRefresh', !store.getters['refresh/getRefresh'])
                        onCancel()
                        form.nodeStatus = ''
                        form.opinions = ''
                    }, 1000);
                } else {
                    store.commit('loading/setLoad', false)
                }
            })
        } else {
            store.commit('loading/setLoad', false)
        }
    })
}

// 驳回
const onBouhui = () => {
    ElMessageBox.confirm(
        `请确定是否驳回?`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true,
        }
    )
        .then(async () => {
            let res = await refuseMessageApi({ id: id })
            if (res.code == 0) {
                setTimeout(() => {
                    onCancel()
                }, 1000);
            }
        })
        .catch(() => {
            ElMessage({ type: 'info', message: `取消驳回` })
        })
}

// 签收
const onQianshou = () => {
    ElMessageBox.confirm(
        `请确定是否签收?`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true,
        }
    )
        .then(async () => {
            let res = await qianshouApi({ id: id })
            if (res.code == 0) {
                setTimeout(() => {
                    onCancel()
                }, 1000);
            }
        })
        .catch(() => {
            ElMessage({ type: 'info', message: `取消签收` })
        })
}

// 退回
const onBack = (row: any) => {
    dialogData.value = id
    isShowKDialog.value = !isShowKDialog.value
}

// 镇级隐患分配
const onFollow2 = (row: any) => {
    acceptId.value = detail.value.orderList[0].acceptId
    dialogData.value = id
    setTimeout(() => {
        isShow2Dialog.value = !isShow2Dialog.value
    }, 500);
}


// 延期申请
const onDelay = (row: any) => {
    dialogData.value = id
    isShowDeDialog.value = !isShowDeDialog.value
}

// 镇级再次隐患分配
const onFollow3 = (row: any) => {
    acceptId.value = row.acceptId
    dialogData.value = row.id
    setTimeout(() => {
        isShow3Dialog.value = !isShow3Dialog.value

    }, 500);

}

//终止
const onStop = (row: any) => {
    dialogData.value = id
    isShowBDialog.value = !isShowBDialog.value
}

// 话费奖励
const onReward = (row: any) => {
    dialogData.value = id
    isShowRGDialog.value = !isShowRGDialog.value
}
// 记录回访
const onFollowUp = (row: any) => {
    dialogData.value = detail.value.id
    isShowFDialog.value = !isShowFDialog.value
}
// 预览

const handleLook = (item: any) => {

    bindFileUrlApi({
        fileUrl: item
    }).then(res => {

        const nameFix2 = item.split('?')[0];
        const nameFix1 = nameFix2.split('.')[nameFix2.split('.').length - 1];
        if (nameFix1 === 'docx') {
            fileType.value = 3;
            pdfUrl.value = res.data;
            dialogVisible.value = true

        } else if (nameFix1 === 'pdf') {
            fileType.value = 2;
            pdfUrl.value = res.data;
            dialogVisible.value = true

        } else if (nameFix1 === 'xls' || nameFix1 === 'xlsx') {
            fileType.value = 4;
            pdfUrl.value = res.data;
            dialogVisible.value = true
        }

    })

};
onMounted(() => {
    initData()
})


</script>
<style scoped lang='scss'>
.my-detail {

    .myIndex {
        font-size: 14px;
        color: #999;
        margin-top: 10px;
    }

    .myTitle {
        /** 文本1 */
        font-size: 14px;
        font-weight: 700;
        line-height: 22px;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 12px;
    }

    h3 {
        font-size: 16px;
        line-height: 20px;
        font-weight: bold;
        margin-top: 20px;
        display: flex;
        align-items: center;

        >i {
            display: block;
            width: 4px;
            height: 14px;
            border-radius: 2px;
            background: $color-primary;
            margin: 0 10px 1px 0;
        }

        .tags {
            padding: 2px 6px;
            margin-left: 8px;
            border-radius: 22px;
            font-size: 14px;
            font-weight: 400;
        }

        .tags-blue {
            border: 1px solid rgba(52, 121, 216, 1);
            color: rgba(52, 121, 216, 1);
        }

        .tags-origin {
            border: 1px solid rgba(237, 106, 11, 1);
            color: rgba(237, 106, 11, 1);
        }

        .tags-green {
            border: 1px solid rgba(45, 166, 65, 1);
            color: rgba(45, 166, 65, 1);
        }

        .tags-red {
            border: 1px solid rgba(232, 80, 67, 1);
            color: rgba(232, 80, 67, 1);
        }
    }

    &__img {
        margin: 20px 0;

        .el-image {
            width: 100px;
            height: 100px;
            margin: 0 10px 10px 0;
        }
    }

    h4 {
        font-size: 14px;
        font-weight: bold;
        margin-top: 10px;
    }

    ul {
        overflow: hidden;
        margin-top: 10px;
        font-size: 14px;

        >li {
            float: left;
            width: 30%;
            margin-bottom: 10px;
            color: #999;

            >span {
                color: #333;
            }
        }

        >li.one {
            width: 100%;
        }
    }

    &__user {
        border: 1px solid $my-color-border;
        border-radius: 8px;
        padding: 10px 20px;
        margin-top: 16px;
    }

    :deep(.el-collapse-item__header) {
        /** 文本1 */
        font-size: 14px;
        font-weight: 700;
        line-height: 22px;
        color: rgba(51, 51, 51, 1);
    }



}

.my-file-box {
    margin: 20px 0;

    .my-file {
        display: flex;
        align-items: center;
        color: #666;
        font-size: 14px;
        width: 80%;
        margin-bottom: 6px;

        img {
            width: 30px;
            height: 30px;
        }

        .fileTitle {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

.meiyongTitle {
    .bigBox {
        margin-left: 4px;
        padding-left: 18px;
        padding-bottom: 14px;
        border-left: 1px solid rgba(228, 228, 228, 1);
        position: relative;
        z-index: 10;

        .ball {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(228, 228, 228, 1);
            position: absolute;
            left: -5px;
            top: 0;
            z-index: 999999;
        }



        .myUlBox {
            border-radius: 8px;
            background: rgba(245, 245, 245, 1);
            padding: 16px 12px 0 12px;
            margin-top: 0;
        }

        .myliuBox {
            padding: 0;

            .topBox {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 3px;
                line-height: 16px;

                .left {
                    /** 文本1 */
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(102, 102, 102, 1);
                }

                .right {
                    /** 文本1 */
                    font-size: 12px;
                    font-weight: 400;

                    color: rgba(153, 153, 153, 1);
                }
            }

            .huiBox {
                width: 100%;
                border-radius: 0px 20.63px 20.63px 20.63px;
                background: rgba(245, 245, 245, 1);
                padding: 10px;
                box-sizing: border-box;
                /** 文本1 */
                font-size: 14px;
                font-weight: 400;

                color: rgba(68, 68, 68, 1);
            }
        }
    }

    .bigBox:last-child {
        border-left: none;

        .ball {
            left: -4px;
        }
    }
}
</style>